<template>
  <div>
    <bar :tips="'您绑定的手机：'+person.userInfo.encryptPhone+'若已丢失或停用，请立即更换'"></bar>
    <bar title="登录密码" router="password" tips="安全性高的密码可以使帐户更安全，建议定期更改密码。"></bar>
    <bar title="支付密码" router="paypassword" tips="为了您的财产安全，建议您定期修改您的支付密码"></bar>
    <bar title="实名认证" router="real-name" tips="审核通过之后不允许修改，平台不会泄露用户信息"></bar>

    <div @click="loginOut" class="login-out">退出登录</div>
  </div>
</template>

<script>
  import bar from './common/setterItem'
  import {mapState} from 'vuex'
  import api from '@/api/login'
  import {Toast} from "mint-ui"
  export default {
    name: "userinfo",
    data () {
      return {
      }
    },
    computed: {
      ...mapState(['person'])
    },
    components: {
      bar
    },
    methods: {
      loginOut () {
        api.get("user/logout",  {isToken: true}).then(res => {
          // 清除缓存
          localStorage.clear()

          Toast({
            message: "退出成功",
            duration: 1000,
            position: "middle"
          })

          this.$router.replace({name: 'login'})
        })
      }
    }
  }
</script>

<style lang="less" scoped>
    .login-out {
      width: 600px;
      height: 80px;
      line-height: 80px;
      text-align: center;
      border-radius: 45px;
      font-size: 34px;
      background-color: #986d33;
      color: #fff;
      margin: 80px auto;
    }
</style>
